// 在这个文件中 设置自定义的打包规则
// webpack基于nodejs 语法和nodejs一样，基于 commonJS
//所有规则,都写在module.exports={}中

//node的内置模块,路径相关
let path = require('path')

//每一个导入进来的插件 都是一个类
//都要 new 来执行
//html-webpack-plugin 用于html打包
let HtmlWebpackPlugin = require('html-webpack-plugin')

//抽离css内容 用的插件
// $ yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
let MiniCssExtractPlugin = require('mini-css-extract-plugin')

//压缩
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//丑化
let UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

//vue
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	// 配置优化规则
	optimization: {
		// 压缩优化
		minimizer: [
			// 压缩 css [问题]: 写了压缩规则,js就不走默认的压缩方式了,也走的是这个插件,从而导致无法压缩
			new OptimizeCssAssetsWebpackPlugin(),
			//解决: 这里用插件来处理 js的压缩
			new UglifyjsWebpackPlugin({
				cache: true, //是否使用缓存
				parallel: true, //是否是并发编译
				sourceMap: true //启动源码映射(方便调试)
			})
		]
	},

	//=> 配置环境 production或development (生产环境/开发环境)
	//生产环境 会做代码混淆,代码压缩等
	mode: 'development',
	//=>入口 不指定,则默认是 index.js
	entry: './src/main.js',
	//=>出口
	output: {
		//打包好的文件名,不指定,默认为main.js
		// [hash] 这样的文件名,可以让每次生成的文件名,带有hash值,以解决浏览器的缓存问题,导致更新后还是用的老js
		// filename: 'bundle.min.[hash].js',
		filename: 'main.js',
		//输出目录(必须是绝对路径) 指定输出目录名称,默认为dist
		//这里用path模块来生成一个 当前目录的 绝对路径
		path: path.resolve(__dirname, 'dist')
	},

	// [关于webpack-dev-server的配置]
	//安装
	//执行命令 npx webpack-dev-server --config xxx.js
	//最好用 yarn (需要配置package.json 和之前配置build一样)
	//服务启动后,默认是不关闭的,当我们修改src中的文件时,会自动编译并刷新浏览器
	// webpack-dev-server 还能搭建跨域服务
	devServer: {
		host: "localhost",
		port: 3000, // 创建服务的端口号
		progress: true, //显示打包编译的进度
		contentBase: './dist', //指定当前服务处理资源的目录(网页初始目录)
		open: true, //编译完 会自动打开浏览器
		// 代理 配置跨域
        proxy: {
            //跨域请求标识 如果/api就代表跨域
            '/api': {
                target: 'http://172.104.113.147:21331',
                changeOrigin: true,
                ws: true,
                // 重写路径
                pathRewrite: {
					// 在页面js中请求的是 /api
					// 这里重写了 直接变成 http://172.104.113.147:21331 实现跨域
                    '/api': '/'
                }
            }
        }
	},

	// [使用插件]
	// 要使用的插件,都在这个数组里
	plugins: [
		//html-webpack-plugin 用于html打包
		new HtmlWebpackPlugin({
			// 指定html模板
			template: './src/index.html',
			// 输出的 文件名
			filename: 'index.html',
			// 在引入的js后面 加上hash戳
			// 解决浏览器的缓存问题
			// 真实项目中,一般是每次编译,使用不同的文件名,而不是用哈希戳
			// hash: true,
			//=>控制html压缩
			minify: {
				// 所有的规则 文档
				// github.com/kangax/html-minifier
				collapseWhitespace: true,
				removeComments: true,
				removeEmptyAttributes: true,
				removeAttributeQuotes: true
			}
		}),
		// 抽离css内容的插件
		new MiniCssExtractPlugin({
			//指定 输出的文件
			filename: 'main.min.css'
		}),
		// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
		new VueLoaderPlugin()
	],

	//使用加载器 loader 处理规则
	module: {
		rules: [
			//css less相关
			{
				// 基于正则匹配,处理哪些文件
				// /\.css$/ 处理所有css / less
				test: /\.(css|less)$/i,
				// 控制使用的 loader
				// 有顺序,从右到左执行(数组 index由大到小)
				use: [
					//把编译好的 css 插入到页面的head中(内嵌式样式)
					//需要 yarn add style-loader -D 安装
					// "style-loader",

					//如果用了 抽离css的插件
					//就必须用它自带的 loader 不能用style-loader
					MiniCssExtractPlugin.loader,

					//编译 @import 或 url()这种语法的
					//需要 yarn add css-loader -D 安装
					"css-loader",

					// postcss-loader自动给css3 加前缀（适配手机端、pc端等等）
					// 安装 $ yarn add autoprefixer postcss-loader -D
					{
						loader: "postcss-loader",
						// 配置项
						options: {
							ident: "postcss",
							plugins: [
								require('autoprefixer')
							]
						}
					},

					// 编译less
					// 需要安装 yarn add less less-loader -D
					"less-loader"
				]
			},
			//处理js相关
			{
				//正则匹配 .js文件
				test: /\.js$/i,
				//编译js的loader
				use: [{
					loader: "babel-loader",
					//配置
					options: {
						// 浏览器不支持commonJS/ES6Modelu等语法,例如 import,就需要用babel来转换
						//预设,基于babel的语法解析包(ES6 转换为 ES5)
						presets: [
							"@babel/preset-env"
						],
						// 使用插件 处理 >=es6 的特殊语法
						plugins: [
							[
								"@babel/plugin-proposal-decorators", {
									"legacy": true
								}
							],
							[
								"@babel/plugin-proposal-class-properties", {
									"lose": true
								}
							],
							
							"@babel/plugin-transform-runtime"
							
							// [
							// 	"component", {
							// 		"libraryName": "mint-ui",
							// 		"style": true
							// 	}
							// ]
						]
					}
				}],
				//指定 JS编译的目录,忽略哪些目录.
				exclude: "/node_modules/",
				include: path.resolve(__dirname, 'src')
			},
			//编译vue文件的loader
			{
				test: /\.vue$/i,
				use: [{
					loader: "vue-loader",
					options: {
                        
                    }
				}]
			},
			//处理字体/图片文件 url-loader
			{
				test: /\.(eot|woff2?|ttf|svg|png|jpg|gif|jepg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							name: "[name]-[hash:5].min.[ext]",
							// fonts file size <= 5KB, use 'base64'; else, output svg file
							limit: 5000, 
							publicPath: "static/",
							outputPath: "static/"
						}
					}
				]
			}
		]
	}
}
